Sudo Slider jQuery Plugin - Multiple sliders

  • image description
  • image description
  • image description
  • image description
  • image description
  • image description
  • image description
  • image description
  • image description
  • image description

Usage

Include the javascripts

<script type="Text/Javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../js/jquery.sudoSlider.min.js"></script>

The Javascript to start it. (This script has to be below your CSS)

<script type="text/javascript" >
    $(document).ready(function(){	
        var sudoSlider = $("#slider").sudoSlider({
           numeric:true
        });
        var sudoSlider2 = $("#slider2").sudoSlider();
    });
</script>

The HTML

<div style="position:relative;" >
   <div id="slider" >
      <ul>
         <li><img src="../images/01.jpg" alt="image description"/></li>
         <li><img src="../images/02.jpg" alt="image description"/></li>
         <li><img src="../images/03.jpg" alt="image description"/></li>
         <li><img src="../images/04.jpg" alt="image description"/></li>
         <li><img src="../images/05.jpg" alt="image description"/></li>   
      </ul>
   </div>
</div>
<div style="position:relative;" >
   <div id="slider2" >
      <ul>
         <li><img src="../images/01.jpg" alt="image description"/></li>
         <li><img src="../images/02.jpg" alt="image description"/></li>
         <li><img src="../images/03.jpg" alt="image description"/></li>
         <li><img src="../images/04.jpg" alt="image description"/></li>
         <li><img src="../images/05.jpg" alt="image description"/></li>   
      </ul>
   </div>
</div>